<template>
  <div :class="boxCls">
    <div
      v-for="item in axisList"
      :key="item.key"
      :class="`${itemCls} ${itemCls}_${item.key}`"
      :style="item.style"
    >
      <div :class="itemViceCls"></div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
const prefix = "axis-mark";
@Component({
  name: "AxisMark",
})
export default class extends Vue {
  // data
  axisList = [
    {
      key: "x",
      style: {
        transform: `translate(-50%, -50%) `,
      },
    },
    {
      key: "y",
      style: {
        transform: `translate(-50%, -50%) rotateY(-90deg)`,
      },
    },
    {
      key: "z",
      style: {
        transform: `translate(-50%, -50%) rotateZ(-90deg)`,
      },
    },
  ];

  // computed
  get boxCls(): string {
    return prefix;
  }
  get itemCls(): string {
    return `${this.boxCls}-item`;
  }
  get itemViceCls(): string {
    return `${this.itemCls}-vice`;
  }
}
</script>
<style lang="less" scoped>
@prefix:axis-mark;
.@{prefix}{
  &-item{
    transform-style: preserve-3d;
    &,&-vice{
      position: absolute;
      border: 1px solid yellowgreen;
      left: 50%;
      top: 50%;
      width: 1000vmax;
      height: 1px;
    }
    &-vice{
      width: inherit;
      height: inherit;
      transform:translate(-50%, -50%) rotateX(-90deg);
    }
  }
}
</style>
